import './App.css'
import React, { Component,Suspense,lazy } from 'react'
import { Route,Switch,Redirect } from 'react-router-dom'
import { Layout } from 'antd'
import Siderpart from './component/Siderpart'
import Headerpart from './component/Headerpart'
import Footerpart from './component/Footerpart'
import Loadingpart from './component/Loadingpart'
const Contentpart = lazy(()=>import('./component/Contentpart'))
const About = lazy(()=>import('./pages/About'))
const Detail = lazy(()=>import('./pages/Detail'))
export default class App extends Component {
	render() {
		return (
			<Layout style={{ height: '100vh' }}>
				<Siderpart />
				<Layout>
					<Headerpart />
					<Suspense fallback={<Loadingpart/>}>
						<Switch>
							<Route path="/home" component={Contentpart} />
							<Route path="/about" component={About} />
							<Route path="/detail" component={Detail}/>
							<Redirect to="/home" />
						</Switch>
					</Suspense>
					<Footerpart />
				</Layout>
			</Layout>
		)
	}
}
